<demo>点击遮罩层关闭</demo>
<template>
  <Button @click="toggle">显示对话框</Button>
  <Dialog v-model:visible="x" :closeOnClickOverlay="true" :ok="f1" :cancel="f2">
    <template v-slot:content>
      <div>对话框内容</div>
      <div>对话框内容</div>
      <div>对话框内容</div>
    </template>
    <template v-slot:title>
      <strong>标题</strong>
    </template>
  </Dialog>
</template>

<script lang="ts">
import Dialog from "../lib/Dialog.vue";
import Button from "../lib/Button.vue";
import { ref, h } from "vue";
export default {
  components: {
    Dialog,
    Button,
  },
  setup() {
    const x = ref(false);
    const toggle = () => {
      x.value = !x.value;
    };
    const f1 = () => {
      console.log("ok");
    };
    const f2 = () => {
      console.log("cancel");
    };
    return {
      x,
      toggle,
      f1,
      f2,
    };
  },
};
</script>
